<template>
  <div class="banner">
    <!-- Slider main container -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
          <img src="@/assets/images/pic1.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="@/assets/images/pic2.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="@/assets/images/pic3.jpg" alt="" />
        </div>
      </div>
      <!-- 添加轮播图下面的小点 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
// 引入swiper
import Swiper,{Pagination,Autoplay} from "swiper";
import "swiper/swiper-bundle.css";

Swiper.use([Pagination,Autoplay]);

export default {
  mounted() {
    const swiper = new Swiper(".banner .swiper", {
      loop: true,
      slidesPerView: 1.2, //设置网格里的个数来达到中间一个两边露出一点的效果
      centeredSlides: true,
      autoplay:{
          delay:1000
      }, 
      pagination: {
        el: ".banner .swiper-pagination",
      },
    });
  },
};
</script>

<style lang="less" scoped>
.banner {
  height: 5rem;
  background-color: #ccc;
  .swiper-wrapper .swiper-slide {
    margin-top: 0.2rem;
    img {
      width: 100%;
      height: 100%;
      transform: scale(0.9);
      transition: 0.3s; //实现平滑的过度
    }
    &.swiper-slide-active {
      img {
        transform: scale(1);
      }
    }
  }
  .swiper{
    --swiper-pagination-color: #00ff33;/* 两种都可以 */
  }
}
</style>